<template>
  	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<!-- 搜索框 -->
				<div class="search-wrapped">
					<el-input v-model="account" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
						:prefix-icon="Search" @change='searchAdmin()' clearable />
				</div>
				<div class="button-wrapped">
					<el-button type="primary" @click="openCreate(3)">添加消息管理员</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border>
					<el-table-column type="index" width="50" />
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="email" label="邮箱" />
					<el-table-column label="操作">
						<template #default="{row}">
							<div>
								<el-button type="success" @click="openEdit(3,row)">编辑</el-button>
								 <el-popconfirm  :title="`确定删除${row.account}`"  width="220px" @confirm="openDelete(row.id)">
                                    <template #reference>
                                        <el-button type="danger" >删除</el-button>
                                    </template>
                                </el-popconfirm>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
			<el-pagination @current-change="getData" @size-change="getData(1)" v-model:current-page="paginationData.currentPage"
          v-model:page-size="paginationData.pageCount" :page-sizes="[3, 5, 7, 10]" background
          layout="prev,pager,next,jumper,-> ,sizes,total" :total="total" />
		</div>
	</div>
	 <editAdmin ref="editAdminRef" @success="getData"></editAdmin>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { Search } from '@element-plus/icons-vue'
import editAdmin from '../components/editAdmin.vue'
import {getAdminList,changeIdentityToUser} from '@/api/userinfo/index'
import type {adminListForm} from '@/api/userinfo/type'
import { ElMessage } from "element-plus"
const account = ref('')
const total = ref('')
const searchAdmin = ()=>{
    getData(1)
}
const tableData = ref([])

onMounted(()=>{
    getData(paginationData.currentPage)
})

const getData = async (page:number)=>{
    let data:adminListForm = {
        identity:'消息管理员',
        page:page ? page : paginationData.currentPage,
        pageSize:paginationData.pageCount
    }
    if(account.value){
        data['account'] = account.value
    }
  const res =  await getAdminList(data)
  if(res.status == 0){
    tableData.value = res.data.list
    total.value = res.data.total
  }
}

const paginationData = reactive({
    currentPage:1,
    pageCount:10,
})

//新增/编辑
const editAdminRef = ref()
//点击新增
const openCreate = (type:number)=>{
    editAdminRef.value.open(type)
}
//点击编辑
const openEdit = (type:number,row:any)=>{
     editAdminRef.value.open(type,row)
}
//点击删除
const openDelete = async (id:string)=>{
    const res =  await changeIdentityToUser(id)
   if(res.status == 0){
        getData(paginationData.currentPage)
        ElMessage({
            type:'success',
            message:'删除成功'
        })
   }else{
     ElMessage({
            type:'error',
            message:'删除失败'
        })
   }
}
</script>

<style scoped>
@import url('@/assets//css/common.scss');
</style>
